<template>
    <div class="login-container">
        <div class="login-box">
            <div id="content">
                <div class="logo">
                </div>
                <el-form :model="loginForm" 
                    status-icon :rules="rules" 
                    ref="loginForm" 
                    class="demo-loginForm">
                    <el-form-item  prop="username">
                        <el-input  v-model="loginForm.username" 
                            placeholder="请输入账号"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item  prop="password">
                        <el-input type="password" 
                            v-model="loginForm.password" 
                            placeholder="请输入密码"
                            show-password
                            autocomplete="off"></el-input>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" round size="mini" @click="submitForm('loginForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
        // rule：表示校验规则，可以调用eui封装的数据
        // value: 表示需要验证的数据
        // callback：表示回调函数，应该是继续向后验证
        var validateUsername = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入账号'));
            } else {
                callback();
            }
        };
        var validatePassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
      return {
        loginForm: {
          username: 'admin',
          password: 'admin888'
        },
        rules: {   // 数据校验/验证规则
            username: [
                // validator：指定数据验证函数
                // trigger：触发条件，blur表示失去焦点时开始验证
                { validator: validateUsername, trigger: 'blur' }
            ],
          password: [
                { validator: validatePassword, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
          // 表单提交时自动进行数据验证
            this.$refs[formName].validate( valid => {
                if (valid) {
                    // 发送异步请求，完成登录操作
                    this.$http.post("/userlogin", this.loginForm).then(response => {
                        if(response.code === 200) {
                            localStorage.setItem("adminInfo", JSON.stringify(response.list))
                            this.$message.success("登录成功")
                            this.$router.push("/main")
                        } else {
                            this.$message.error(response.msg)
                        }
                    })
                } else {
                    // 调用注册的ElementUI组件-message消息框
                    this.$message.error("表单数据填写有误，请检查")
                    return false;
                }
            });
      },
      resetForm(formName) {    // 重置表单数据，EUI提供了函数可以直接重置
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
.login-container{
    padding-top: 1px;
    width: 100%;
    height: 100vh; /** view height */
    background: linear-gradient( to bottom, #FF684C, #FF7966)
}
.login-box{
    width: 1000px;
    height: 500px;
    margin: 100px auto;
    background:#eee;
    background: url("../assets/images/loginbg.a14bd0f6.png") no-repeat center center;
    background-size: contain;
    position: relative;
}
#content{
    position: absolute;
    top: 50px;
    right: 215px;
    width: 290px;
    height: 450px;
    /* background: orange; */
}
.logo{
    width: 290px;
    height: 100px;
    margin: 50px 0;
    background: url("../assets/images/logo.926d2fa6.png") no-repeat;
    background-size: contain;
}

</style>